<template>
  <div>
    <div class="crumbs">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>
                <i class="el-icon-user"></i> 筹集资金管理
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="container">
        <div class="handle-box">
            <el-button
                type="primary"
                icon="el-icon-circle-plus"
                class="handle-del mr10"
                @click="addVisible = true"
            >新增筹集</el-button>
            <el-select v-model="id" placeholder="请选择小区" @change="changeHouse" style="display:block;width:150px;margin-top:20px;">
                <el-option
                v-for="item in houses"
                :key="item.communityId"
                :label="item.communityName"
                :value="item.communityId">
                </el-option>
            </el-select>
            <el-table
            :data="funds"
            border
            style="width:auto;margin-top:28px;">
                <el-table-column
                prop="fundId"
                label="筹集ID"
                width="120">
                </el-table-column>
                <el-table-column
                prop="fundCommunityId"
                label="筹集小区ID"
                width="180">
                </el-table-column>
                <el-table-column
                prop="fundMoney"
                label="筹集总资金（￥）"
                width="180">
                </el-table-column>
                <el-table-column
                prop="fundContent"
                label="筹集内容"
                width="180">
                </el-table-column>
                <el-table-column
                prop="fundTitle"
                label="筹集标题"
                width="180">
                </el-table-column>
                <el-table-column
                prop="fundTime"
                label="筹集创建时间"
                width="180">
                </el-table-column>
                <el-table-column
                prop="fundAvg"
                label="筹集人均资金（￥）"
                width="180">
                </el-table-column>
                <el-table-column
                prop="fundTime"
                label="筹集创建时间"
                width="180">
                </el-table-column>
                <el-table-column label="操作" width="230" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-edit"
                            @click="showUpdate(scope.$index, scope.row)"
                        >更新</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-view"
                            style="color:blue;"
                            @click="showPay(scope.$index, scope.row)"
                        >查看已缴费</el-button>
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            class="red"
                            @click="del(scope.$index, scope.row)"
                        >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" :visible.sync="addVisible" width="50%">
        <el-form ref="form" :model="addForm" label-width="100px">
            <el-form-item label="筹集金额">
                <el-input v-model="addForm.fundMoney"></el-input>
            </el-form-item>
            <el-form-item label="筹集内容">
                <el-input v-model="addForm.fundContent"></el-input>
            </el-form-item>
            <el-form-item label="筹集标题" >
                <el-input v-model="addForm.fundTitle"></el-input>
            </el-form-item>
            <el-form-item label="小区">
                <el-select v-model="addForm.fundCommunityId">
                    <el-option
                    v-for="item in houses"
                    :key="item.communityId"
                    :label="item.communityName"
                    :value="item.communityId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="add">添 加</el-button>
        </span>
    </el-dialog>

    <!-- 更新弹出框 -->
    <el-dialog title="更新" :visible.sync="updateVisible" width="30%">
        <el-form ref="form" :model="updateForm" label-width="70px">
            <el-form-item label="筹集内容">
                <el-input v-model="updateForm.fundContent"></el-input>
            </el-form-item>
            <el-form-item label="筹集标题" >
                <el-input v-model="updateForm.fundTitle"></el-input>
            </el-form-item>
            <el-form-item label="小区">
                <el-select v-model="updateForm.fundCommunityId">
                    <el-option
                    v-for="item in houses"
                    :key="item.communityId"
                    :label="item.communityName"
                    :value="item.communityId">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="updateVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">更 新</el-button>
        </span>
    </el-dialog>

    <!-- 筹集用户弹出框 -->
    <el-dialog title="已缴费筹集用户" :visible.sync="payVisible" width="60%">
        <el-table
            :data="users"
            border
            style="width: 100%;margin-top:28px;">
            <el-table-column
            prop="fundRecordUser.userAccount"
            label="用户账户名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="fundRecordUser.userName"
            label="用户名"
            width="180">
            </el-table-column>
            <el-table-column
            prop="fundRecordMoney"
            label="支付金额"
            width="180">
            </el-table-column>
            <el-table-column
            prop="fundRecordUser.userPhone"
            label="手机号"
            width="180">
            </el-table-column>
        </el-table>
    </el-dialog>

  </div>
</template>

<script>
import {getFunds,getFundById,getHouses,delFund,updateFund,addFund} from '@/api'

export default {
    data(){
        return {
            funds: [],
            houses: [],
            users: [],
            id: '',
            addVisible: false,
            addForm: {},
            updateForm: {},
            updateVisible: false,
            payVisible: false,
        }
    },
    methods:{
        showPay(index, row){
            this.payVisible = true
            getFundById(row.fundId).then(res => {
                this.users = res.data.fundRecordVos
            })
        },
        changeHouse(){
            this.getFunds()
        },
        getFunds(){
            getFunds(this.id).then(res => {
                this.funds = res.data
            })
        },
        getHouses(){
            getHouses().then(res => {
                this.houses = res.data
            })
        },
        showUpdate (index, row) {
            this.idx = index
            this.updateForm = row
            this.updateVisible = true
        },
        add(){
            let fromData = new FormData()
            fromData.append('fundCommunityId', this.addForm.fundCommunityId)
            fromData.append('fundMoney', this.addForm.fundMoney)
            fromData.append('fundContent', this.addForm.fundContent)
            fromData.append('fundTitle', this.addForm.fundTitle)
            addFund(fromData).then(res => {
                if (res.code === 0) {
                    this.addVisible = false
                    this.$message({
                        type: 'success',
                        message: '添加成功'
                    })
                    this.getFunds()
                } else {
                    this.$message({
                        type: 'error',
                        message: res.msg
                    })
                }
            })
        },
        update(){
            let fromData = new FormData()
            fromData.append('fundId', this.funds[this.idx].fundId)
            fromData.append('fundCommunityId', this.updateForm.fundCommunityId)
            fromData.append('fundContent', this.updateForm.fundContent)
            fromData.append('fundTitle', this.updateForm.fundTitle)
            updateFund(fromData).then(res => {
                if (res.code === 0) {
                    this.updateVisible = false
                    this.$message({
                        type: 'success',
                        message: '更新成功'
                    })
                    this.getFunds()
                } else {
                    this.$message({
                        type: 'error',
                        message: '更新失败'
                    })
                }
            })
        },
        del(index,row){
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                let fromData = new FormData()
                fromData.append('id', this.funds[index].fundId)
                delFund(fromData).then(res => {
                    if (res.code === 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                        this.funds.splice(index, 1)
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败'
                        })
                    }
                })
                
            })
            .catch(() => {});
        }
    },
    mounted(){
        this.getHouses()
    }
}
</script>

<style>
.red{
    color: red;
}
.map {
  width: 100%;
  height: 300px;
}
</style>